import React , { Component } from 'react'


import Swiper from 'swiper'

import BannerContainer from './BannerStyleComp.js'

//定义无状态组件，渲染banner
const Item = props =>{
    return(
          <div className="swiper-slide">
            <img src={props.pic} alt=""/>
          </div>
                   
    )
}
class Banner extends Component {
    renderItem = () =>{
        return this.props.banners&&this.props.banners.map(item =><Item key={item.id} {...item}/>)
    }
    render(){
        return(
            <BannerContainer>
                <div className="swiper-container">
                    <div className="swiper-wrapper">
                       {this.renderItem()}
                    </div>
                    {/* <!-- 如果需要分页器 --> */}
                    <div className="swiper-pagination"></div>
                   
                </div>
            </BannerContainer>
        )
       
    }

    componentDidUpdate(){
        if(!this.swiper){
            this.swiper = new Swiper ('.swiper-container', {
                loop: true, // 循环模式选项
                autoplay:true,
                
                pagination: {
                el: '.swiper-pagination',
                bulletActiveClass: 'my-bullet-active',
                },
            })        
        }
        
    }
}

export default Banner 